<!--
  echarts 日历坐标系 calendar
-->

<template>
  <div :class="'e-calendar-wrap ' + wrapId" :id="wrapId" :ref="wrapId" :style="{ height: height, width: width }">
    <div :id="id" :ref="id" :class="'chart ' + className"></div>
    <div class="right-menu-wrap" ref="rightMenu">
      <slot name="right-menu"></slot>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { isFunction, merge, isEmpty } from 'lodash'
// 图标跟随视窗变化而变化
import chartResize from '@/mixins/chartResize'
import chartDomeResize from '@/mixins/chartDomeResize'
import config from '@/config'

export default {
  name: 'e-calendar',
  mixins: [chartResize, chartDomeResize],
  props: {
    id: {
      type: String,
      default: 'e-calendar'
    },
    className: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    fetchData: {
      type: Function
    },
    chartData: {
      type: Object,
      default: null
    },
    loadingStyle: {
      type: Object,
      default: () => ({})
    },
    shrink: {
      // 收缩
      type: Boolean
    }
  },
  computed: {
    wrapId() {
      return this.id + '-chart'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      handler() {
        this.chart.hideLoading()
        this.chartRest()
      },
      deep: true
    },
    /**
     * desc: 页面收缩时，执行图表重新渲染
     * param {type}
     * return:
     */
    shrink() {
      this.resize()
    }
  },
  beforeDestroy() {
    const { chart } = this
    if (!chart) {
      return
    }
    this.chart.off('click')
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    // 初始化echarts
    this.chart = echarts.init(document.getElementById(this.id), config.echartsthemeName)
    // 图标请求数据
    if (isFunction(this.fetchData)) {
      this.getChartData()
    }
    // 图表渲染前数据就已存在
    if (!isEmpty(this.chartData)) {
      this.initChart()
    }
    this.$nextTick(() => {
      this.bindEvent()
    })
  },
  methods: {
    /**
     * desc: 图表事件绑定
     * param {type}
     * return:
     */
    bindEvent() {
      // 单击事件
      this.chart.on('click', this.clickHandle)
    },
    /**
     * desc: 显示图表加载loading
     * param {type}
     * return:
     */
    showLoading() {
      this.chart.showLoading(merge({}, config.echartsLoadingStyle, this.loadingStyle))
    },
    /**
     * desc: 图表重置
     * param {type}
     * return:
     */
    chartRest() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    /**
     * desc: 初始化图表
     * param {type}
     * return: void
     */
    initChart() {
      this.chart.setOption(this.chartData, true)
    },
    /**
     * desc: 获取图表数据
     * param {type}
     * return: void
     */
    getChartData() {
      this.showLoading()
      this.fetchData()
    },
    /**
     * desc: 单击事件
     * param {params} 图表点击返回对象
     * return: void
     */
    clickHandle(params) {
      this.$emit('q-click', params)
    },
    resize() {
      this.chart.resize()
    }
  }
}
</script>
<style lang="less">
.e-calendar-wrap {
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>
